<template>
  <div class="classbox">
    <h2 class="title">班级概况 <span @click="visters">访客情况 ></span><span @click="workers">教职工情况 ></span></h2>
    <div class="menu">
      <span>班级</span>
      <el-input class="inp" v-model="grade" placeholder="请输入班级"></el-input>
      <span>学校</span>
      <el-select v-model="school" placeholder="请选择" @change="pickschool">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-button type="primary" class="search" @click="searchdata"><i class="el-icon-search"></i> 搜索</el-button>
      <span class="exportlist" @click="exportdata">导出</span>
    </div>
    <div class="citybox">
      <div class="cabin">
        <table>
          <thead>
          <tr>
            <th v-for="(v,i) in headlist" :key='i'>{{v}}</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(v,i) in datalist" :key='i'>
            <td><i :class="v.sta == 0 ? 't1' : v.sta == 1 ? 't2' : v.sta == 2 ? 't3' : v.sta == 3 ? 't4' : ''"></i>{{ v.name }}</td>
            <td>{{ v.n1 }}</td>
            <td>{{ v.n2 }}</td>
            <td>{{ v.n3 }}</td>
            <td>{{ v.n4 }}</td>
            <td>{{ v.n5 }}</td>
            <td>{{ v.n6 }}</td>
            <td>{{ v.n7 }}</td>
            <td>{{ v.n8 }}</td>
            <td class="detail" @click="todetails(v)">详情 ></td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'organization',
    data() {
      return {
        school: '正常上课',
        grade: '',
        options: [{
          value: '正常上课',
          label: '正常上课'
        }, {
          value: '已停课',
          label: '已停课'
        }, {
          value: '已复课',
          label: '已复课'
        }],
        headlist: ['城市', '风险等级', '今日测温', '今日体温异常', '当前疑似', '当前确诊', '当前居家隔离', '当前医疗隔离', '累计康复人数', '详情'],
        datalist: [
          {
            name: '广州',
            n1: 'IV',
            n2: '12',
            n3: '5',
            n4: '36',
            n5: '78',
            n6: '29',
            n7: '47',
            n8: '66',
            sta: 0
          },
          {
            name: '广州',
            n1: 'IV',
            n2: '12',
            n3: '5',
            n4: '36',
            n5: '78',
            n6: '29',
            n7: '47',
            n8: '66',
            sta: 1
          },
          {
            name: '广州',
            n1: 'IV',
            n2: '12',
            n3: '5',
            n4: '36',
            n5: '78',
            n6: '29',
            n7: '47',
            n8: '66',
            sta: 2
          },
          {
            name: '广州',
            n1: 'IV',
            n2: '12',
            n3: '5',
            n4: '36',
            n5: '78',
            n6: '29',
            n7: '47',
            n8: '66',
            sta: 3
          },
          {
            name: '广州',
            n1: 'IV',
            n2: '12',
            n3: '5',
            n4: '36',
            n5: '78',
            n6: '29',
            n7: '47',
            n8: '66',
            sta: 0
          },
          {
            name: '广州',
            n1: 'IV',
            n2: '12',
            n3: '5',
            n4: '36',
            n5: '78',
            n6: '29',
            n7: '47',
            n8: '66',
            sta: 1
          },
          {
            name: '广州',
            n1: 'IV',
            n2: '12',
            n3: '5',
            n4: '36',
            n5: '78',
            n6: '29',
            n7: '47',
            n8: '66',
            sta: 2
          }
        ],
      }
    },
    mounted() {

    },
    methods: {
      visters(){
        alert(1)
      },
      workers(){
        alert(2)
      },
      todetails(v){
        console.log(v)
      },
      pickschool(v){
        console.log(v)
      },
      exportdata(){
        alert(3)
      },
      searchdata(){
        alert(4)
      }
    }
  }
</script>

<style lang="less" scoped>
  .classbox{
    .title{
      font-size: 16px;
      color: #fff;
      line-height: 44px;
      span{
        float: right;
        font-size: 13px;
        color: #4353da;
        cursor: pointer;
        &:last-child{
          margin-right: 20px;
        }
        &:hover{
          color: #fff;
        }
      }
    }
    .menu{
      margin: 30px 0 40px 0;
      span{
        font-size: 14px;
        color: #fff;
        line-height: 40px;
        margin-right: 20px;
      }
      /deep/ .el-input__inner{
        color: #fff;
      }
      .inp{
        display: inline-block;
        width: 200px;
        margin-right: 20px;
        /deep/.el-input__inner{
          font-size: 13px;
          color: #fff;
          line-height: 40px;
          background-color: transparent;
        }
      }
      .search{
        background-color: #1f29af;
        border-color: #1f29af;
        &:hover{
          background-color: #409EFF;
          border-color: #409EFF;
        }
      }
      .exportlist{
        color: #2029ae;
        cursor: pointer;
        margin-left: 20px;
        &:hover{
          color: #fff;
        }
      }
      .el-select{
        margin-right: 20px;
        /deep/ .el-input__inner{
          background-color: transparent;
        }
      }
    }
    .citybox {
      h2 {
        font-size: 18px;
        color: white;
        margin: 40px 0 30px 0;
      }
      .cabin{
        padding: 10px 20px;
        background: #000;
        table{
          width: 100%;
          display: table;
          border-collapse: collapse;
          thead{
            border-bottom: 1px solid #313445;
            th{
              color: #fff;
              font-size: 14px;
              font-weight: 500;
              line-height: 60px;
              &:first-child{
                border-right: 1px solid #313445;
              }
            }
          }
          tbody{
            tr{
              td{
                &:first-child{
                  border-right: 1px solid #313445;
                }
              }
            }
            td{
              font-size: 13px;
              color: #fff;
              text-align: center;
              line-height: 60px;
              &.detail{
                color: #2a36e0;
                cursor: pointer;
                &:hover{
                  color: orangered;
                }
              }
              i{
                display: inline-block;
                width: 8px;
                height: 8px;
                border-radius: 50%;
                margin-right: 6px;
              }
              .t1{
                background-color: #3c3694;
              }
              .t2{
                background-color: #ca8c38;
              }
              .t3{
                background-color: #8a58d1;
              }
              .t4{
                background-color: #c5506f;
              }
            }
          }
        }
      }

    }
  }
</style>
